<template>
    <view style="position: absolute;width:100vw;height:100vh;z-index: 999" @tap="closeCourse()" v-if="course">

        <template v-if="type==='index'" >
            <image style="width:750upx;height:1248upx" :src="'https://listen-book.oss-cn-beijing.aliyuncs.com/icon/course/'+img[type]"   mode="scaleToFill"></image>
            <div style="width:750upx;height:calc( 100vh - 1248upx );background:rgba(0,0,0,.7);" ></div>
<!--            <image style="width:750upx;height:247upx" src="https://listen-book.oss-cn-beijing.aliyuncs.com/icon/course/1-1.png"  mode="scaleToFill"></image>-->
<!--            <div style="width:750upx;height:calc( 100vh - 1220upx );background:rgba(0,0,0,.7);" ></div>-->

<!--            <image style="width:750upx;height:585upx;" src="https://listen-book.oss-cn-beijing.aliyuncs.com/icon/course/1-2.png"  mode="scaleToFill"></image>-->
<!--            <div style="width:750upx;height:calc( 100vh - 1430upx );background:rgba(0,0,0,.7);" ></div>-->
<!--            <image style="width:750upx;height:374upx;" src="https://listen-book.oss-cn-beijing.aliyuncs.com/icon/course/1-3.png"  mode="scaleToFill"></image>-->
<!--            <div style="width:750upx;height:50upx;background:rgba(0,0,0,.7);" ></div>-->
        </template>


        <template v-if="type==='type'" >
            <image style="width:750upx;height:1206upx" :src="'https://listen-book.oss-cn-beijing.aliyuncs.com/icon/course/'+img[type]"   mode="scaleToFill"></image>
            <div style="width:750upx;height:calc( 100vh - 1206upx );background:rgba(0,0,0,.7);" ></div>
        </template>



        <template v-if="type==='my'" >
            <image style="width:750upx;height:1246upx" :src="'https://listen-book.oss-cn-beijing.aliyuncs.com/icon/course/'+img[type]"   mode="scaleToFill"></image>
            <div style="width:750upx;height:calc( 100vh - 1246upx );background:rgba(0,0,0,.7);" ></div>
        </template>


        <template v-if="type==='record-1'" >
            <div style="width:750upx;height:calc( 100vh - 1207upx );background:rgba(0,0,0,.7);" ></div>

            <image style="width:750upx;height:1207upx" :src="'https://listen-book.oss-cn-beijing.aliyuncs.com/icon/course/'+img[type]"   mode="scaleToFill"></image>
        </template>

        <template v-if="type==='record-2'" >
            <div style="width:750upx;height:calc( 100vh - 1207upx );background:rgba(0,0,0,.7);" ></div>
            <image style="width:750upx;height:1207upx" :src="'https://listen-book.oss-cn-beijing.aliyuncs.com/icon/course/'+img[type]"   mode="scaleToFill"></image>

        </template>

        <template v-if="type==='record-3'" >
            <div style="width:750upx;height:calc( 100vh - 1207upx );background:rgba(0,0,0,.7);" ></div>
            <image style="width:750upx;height:1207upx" :src="'https://listen-book.oss-cn-beijing.aliyuncs.com/icon/course/'+img[type]"   mode="scaleToFill"></image>
        </template>
        <template v-if="type==='record-4'" >
            <div style="width:750upx;height:20upx;background:rgba(0,0,0,.7);" ></div>
            <image style="width:750upx;height:1207upx" :src="'https://listen-book.oss-cn-beijing.aliyuncs.com/icon/course/'+img[type]"   mode="scaleToFill"></image>
            <div style="width:750upx;height:calc( 100vh - 1607upx );background:rgba(0,0,0,.7);" ></div>

        </template>

        <!--<image style="width:100vw;height:100vh;" :src="'https://listen-book.oss-cn-beijing.aliyuncs.com/icon/course/'+img[type]"  mode="aspectFit"></image>-->
    </view>
</template>

<script>
  export default {
    name: "courseIndex",
    props:{
      type:{
        type:String,
        default:'index',
      }
    },
    data:function(){
      return {
        course:false,
        img:{
          'index':'new-index.png',
          'record-1':'3.png',
          'type':'2.png',
          'record-2':'4.png',
          'record-3':'5.png',
          'record-4':'6.png',
          'my':'7.png'
        }
      }
    },
    created:function(){
      if(uni.getStorageSync(this.type+'Course')<3){
        this.course=true;
        setTimeout(()=>{
          this.closeCourse();
        },5000)
      }
    },
    methods:{

      closeCourse(){
        let index = uni.getStorageSync(this.type+'Course');
        if(!index)
          index=0;
        index++;
        uni.setStorageSync(this.type+'Course',index);
        this.course=false;
      }
    }
  }
</script>

<style scoped>

    image{
        display:block;
        margin: 0;
        padding: 0;
    }
</style>
